<template>
  <div style="height: 600px;">
    <div style="height: 252px;">
      <pie id="jcdPie" ref="jcdPie"></pie>
    </div>
    <div style="width: 100%" class="flex-row-center-center">
      <div style="width: 70%">
        <Table :columns="columns" :data="tableData" stripe></Table>
        <div
          class="flex-row-end-center"
          style="margin-top: 10px"
          v-if="totalLen > 5"
        >
          <Page
            :total="totalLen"
            :page-size="pageSize"
            show-total
            @on-change="changepage"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pie from "../../../components/basic/chart/pie";
export default {
  data() {
    return {
      columns: [
        { title: "编号", key: "kqId" },
        { title: "气库名称", key: "kqName" },
        { title: "检测点编号", key: "jcdId" },
        { title: "检测点名称", key: "jcdName" },
        { title: "检测点数值", key: "jcdValue" },
        { title: "数据更新事件", key: "updateTime" },
      ],
      tableData: [],
      jcdList:[],
      pageSize: 5,
    };
  },
  components: {
    pie,
  },
  props: {
    jcdInfoList: Object,
    totalLen:Number
  },
  watch: {
    jcdInfoList(val) {
      this.jcdList = val.jcdList;
      this.tableData = this.jcdList.slice(0,this.pageSize)
       this.$refs.jcdPie.drawPie(val.jcdPie);
    },
  },
  mounted() {
   
  },
  methods:{
      changepage(index) {
      let _start = (index - 1) * this.pageSize;
      let _end = index * this.pageSize;
      this.tableData = this.jcdList.slice(_start, _end);
    },
  }
};
</script>
<style scoped>
</style>